<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width:800px;
            height:600px;
            position: relative;
            margin: 100px auto;
            background:#000000;
            border:2px solid red;
            overflow: hidden;
        }
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    // 动画  :
    // animate(); 以结果为导向进行 jQuery ;
    // 选择元素 : $(选择符)
    // $("#box").animate({
    //     width : 100,
    //     height : 100
    // },5000)
        // 构造函数获取实例对象
        // 绑定事件功能
       function FireWork(){
           this.box=document.querySelector('#box')
           this.bindEvent();
       }

        // 给容器绑定事件 ;
        // 主体烟花创建并运动到目标点; 
            // 创造烟花元素的函数
            // 让元素有一个可靠的起始点;
            // 创建一个div子元素
            // 运动;
            // 运动结束有一个回调函数;
                // 高度与鼠标点击位置平齐
                // 到达预定高度去除该元素
        FireWork.prototype.bindEvent=function(){
            var self = this;
            self.box.onclick=function(evt){
                var e=evt||window.event
                var fire = self.creatfire();
                fire.style.left=e.offsetX+'px'
                $(fire).animate({
                    top:e.offsetY
                },100000,function(){
                    fire.remove();
                })
            }
        }
    // 动态创建div子元素
        //  1. 创建一个div;
        //  2. div放在页面之中;
        // 统一给创建的子元素一个类名
        //给动态创建的div元素一个随机的颜色    
        
        // 把这个div子元素加在父元素里面
        // 一定要记得返回数据，不然子元素出不来

        FireWork.prototype.creatfire=function(){
            var self = this;
            var div = document.createElement('div')
            div.className='ball';
            div.style.backgroundColor='#'+Math.round(parseInt('ffffff',16)*Math.random()).toString(16).padStart(6,'0');
            self.box.appendChild(div)
            return div
        }

    
    
    
    FireWork.prototype.boom = function(){
        
    }

    var fw = new FireWork();


</script>
</html>